<template>
	<view>
		<view v-if="isVip == 0">
			<view class="mask" @tap="payModal = true" >
				<view class="flex justify-center align-center">
					<view class="primary vip-btn">购买vip查看更多</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="payModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">购买VIP</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					只需{{ card.price }}元购买VIP包月服务，就可查看更多信息！
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub text-green " @tap="weixinPay()">
						<text class="cuIcon-moneybag"></text>微信支付
					</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		created() {
			//获取所需支付费用
			this.fatchFee()
			if(this.$store.state.userInfo){
				this.isVip = this.$store.state.userInfo['is_vip']
			}else{
				console.log('has no user navigate to user!!!')
				uni.navigateTo({
					url: '/pages/user/user'
				})
			}
		},
		watch: {
			'$store.state.userInfo': function () {
				console.log('watch user is changed!!')
				this.isVip = this.$store.state.userInfo["is_vip"]
			}
		},
		data() {
			return {
				isVip: 0,
				payModal: false,
				card: {}
			};
		},
		methods: {
			hideModal(){
				this.payModal = false
			},
			buyVip() {
				
			},
			async weixinPay(){
				let res = await this.$api.takeOrder({
					key: this.$util.getKey(),
					uid: this.$util.getUid(),
					card_id: this.card.id
				})
				if(res && res.data && res.data.data){
					let orderInfo = res.data.data
					console.log('take order -:', orderInfo)
					// appid: "wxf8fde4a8f50f2cb9"
					// err_code: "PARAM_ERROR"
					// err_code_des: "appid和openid不匹配"
					// mch_id: "1498895032"
					// nonce_str: "9wWzj9Pvx1kVIQgx"
					// result_code: "FAIL"
					// return_code: "SUCCESS"
					// return_msg: "OK"
					// sign: "76B58442B60C68B72473B8ADEBA1BB85"
					let that = this
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: orderInfo.timestamp,
					    nonceStr: orderInfo.noncestr,
					    package: orderInfo.package,
					    signType: 'MD5',
					    paySign: orderInfo.sign,
					    success: function (res) {
					        console.log('success:' + JSON.stringify(res));
							//支付 成功，更新 userinfo，同时修改遮罩
							that.$store.dispatch('dispatchUserInfo')
							that.hideModal()
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
							uni.showToast({
								title: '支付失败！',
								icon: 'none'
							})
							that.hideModal()
					    }
					});
				}
			},
			async fatchFee(){
				let res = await this.$api.queryPayCard({
					key: this.$util.getKey(),
				})
				if(res &&  res.data && res.data.data){
					let cards = res.data.data
					let monthCard =  cards.filter( e => e.card_name == '月卡')
					if(monthCard && monthCard.length > 0){
						this.card = monthCard[0]
					}
				}
			}
		},
	}
</script>

<style>
.mask{
	z-index: 99;
	width: 100%;
	height: 230px;
	position: absolute;
	bottom: 0;
	background: rgba(255,255,255,0.7);
	background-size: cover;
}
.vip-btn{
	background-color: #0081ff;
	margin-top: 100rpx;
	color: white;
	height: 70rpx;
	padding: 10rpx;
	border-radius: 10rpx;
	line-height: 50rpx;
	font-size: 25rpx;
}
</style>
